<template>
  <div>
    <!-- 主页面 -->
    <div class="app-container" v-if="ProcessView == 0">
      <!-- 过滤条件 -->
      <div class="filter-container">
        <div class="input-box">
          <span class="item-label">创建时间: </span>
          <el-date-picker v-model="select_datetime" type="daterange" value-format="yyyy-MM-dd" start-placeholder="开始日期"
            end-placeholder="结束日期" @change="changeDateTime" />
        </div>
        <div class="input-box">
          <span class="item-label">所属公司: </span>
          <el-select class="group-select" v-model="listQuery.groupId" filterable reserve-keyword placeholder="选择公司"
            @change="changeGroup" clearable>
            <el-option v-for="item in list_group" :key="item.id" :label="item.label" :value="item.id">
            </el-option>
          </el-select>
        </div>
        <div class="input-box">
          <span class="item-label">所属网点: </span>
          <el-select class="branch-select" v-model="listQuery.pointId" filterable reserve-keyword placeholder="绑定网点"
            @change="getList" clearable>
            <el-option v-for="item in list_branch" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </div>

        <div class="input-box">
          <span class="item-label">发起人: </span>
          <el-select class="group-select" v-model="listQuery.createUserName" filterable reserve-keyword placeholder="选择发起人"
            @change="getList" clearable>
            <el-option v-for="item in list_initiator" :key="item.userId" :label="item.realName" :value="item.realName">
            </el-option>
          </el-select>
        </div>
        <div class="input-box">
          <span class="item-label">处理人: </span>
          <el-select class="group-select" v-model="listQuery.dealWithUserName" filterable reserve-keyword placeholder="选择处理人"
            @change="getList" clearable>
            <el-option v-for="item in list_deal" :key="item.userId" :label="item.realName" :value="item.realName">
            </el-option>
          </el-select>
        </div>
        <div class="input-box">
          <span class="item-label">逾期状态: </span>
          <el-select class="group-select" v-model="listQuery.overdueStatus" filterable reserve-keyword placeholder="选择逾期状态"
            @change="getList" clearable>
            <el-option v-for="item in list_overdue" :key="item.id" :label="item.label" :value="item.id">
            </el-option>
          </el-select>
        </div>
        <div class="input-box">
          <span class="item-label">处理状态: </span>
          <el-select class="group-select" v-model="listQuery.status" filterable reserve-keyword placeholder="选择处理状态"
            @change="getList" clearable>
            <el-option v-for="item in list_status" :key="item.id" :label="item.label" :value="item.id">
            </el-option>
          </el-select>
        </div>
        <div class="input-box">
          <span class="item-label">优先级: </span>
          <el-select class="group-select" v-model="listQuery.priority" filterable reserve-keyword placeholder="选择优先级"
            @change="getList" clearable>
            <el-option v-for="item in list_priority" :key="item.id" :label="item.label" :value="item.id">
            </el-option>
          </el-select>
        </div>
        <el-button class="plain-btn reset-btn" @click="resetfilter">重置</el-button>
      </div>
      <!-- 操作 -->
      <div class="crud">
        <div class="crud-btn-container">
          <div class="crud-item crud-all" :class="listQuery.searchBy == '' ? 'crud-active' : ''" @click="changeBtn('')">
            全部工单
          </div>
          <div class="crud-item crud-commit" :class="listQuery.searchBy == 'commit' ? 'crud-active' : ''" @click="changeBtn('commit')">
            我发起的
          </div>
          <div class="crud-item crud-deal" :class="listQuery.searchBy == 'deal' ? 'crud-active' : ''" @click="changeBtn('deal')">
            待我整改
          </div>
          <div class="crud-item crud-accept" :class="listQuery.searchBy == 'accept' ? 'crud-active' : ''" @click="changeBtn('accept')">
            待我验收
          </div>
          <div class="crud-item crud-copy" :class="listQuery.searchBy == 'copy' ? 'crud-active' : ''" @click="changeBtn('copy')">
            抄送我
          </div>
        </div>
        <!-- <div class="search">
        <el-input v-model="listQuery.keyword" placeholder="查找待处理工单" class="crud-input">
          <el-button class="search-btn" slot="append" icon="el-icon-search" @click="handleFilter" />
        </el-input>
      </div> -->
      </div>

      <!-- 0 table表格 -->
      <el-table :key="tableKey" v-loading="listLoading" element-loading-text="数据加载中" element-loading-spinner="el-icon-loading"
        :data="list" border fit highlight-current-row>
        <el-table-column type="index" width="55" label="序号" />

        <!-- <el-table-column label="工单图片" align="center">
          <template slot-scope="{ row }">
            <el-image
              style="width: 100px; height: 80px"
              :src=' "http://" + row.pictures[0].pictureUrl'
              :preview-src-list="row.workOrderListImgArr">
            </el-image>
            <button @click="ceshi(row)"></button>
          </template>
        </el-table-column> -->
        <el-table-column label="网点名称" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.pointName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="发起人" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.createUserName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="提交时间" prop="createTime" min-width="110" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.createTime | parseTime("{y}-{m}-{d} {h}:{i}") }}</span>
          </template>
        </el-table-column>
        <el-table-column label="工单类型" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.patrolChecks[0] && row.patrolChecks[0].ciName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="优先级" align="center">
          <template slot-scope="{ row }">
            <span v-if="row.priority == 1">高</span>
            <span v-else-if="row.priority == 2">中</span>
            <span v-else-if="row.priority == 3">低</span>
          </template>
        </el-table-column>
        <el-table-column label="处理人" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.dealWithUserName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="是否逾期" align="center">
          <template slot-scope="{ row }">
            <!-- <span>{{ row.overdueStatus == "1" ? "未逾期" : "已逾期" }}</span> -->
            <span v-if="row.overdueStatus == 1">未逾期</span>
            <span v-else-if="row.overdueStatus == 2">已逾期</span>
            <span v-else-if="row.overdueStatus == 3">——</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template slot-scope="{ row }">
            <span v-if="row.status == 1">待整改</span>
            <span v-else-if="row.status == 2">待验收</span>
            <span v-else-if="row.status == 3">已验收</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center" width="100px" class-name="small-padding fixed-width">

          <template v-if="role_list.indexOf('80000070102') != -1" slot-scope="{ row }">
            <span v-if="(row.status == '1' || row.status == '2') && (row.View_button == false)" class="action action-update"
              @click="seeWorkorderInfo(row)">去处理</span>
            <span v-else-if="(row.status == '1' || row.status == '2') && (row.View_button == true)" class="action action-update"
              @click="seeWorkorderInfo(row)">查看</span>
            <span v-else class="action action-update" @click="seeWorkorderInfo(row)">查看</span>
          </template>
        </el-table-column>
      </el-table>
      <!-- 1 分页 -->
      <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
        @pagination="getList" />

      <!-- 2 审批的弹框 -->
      <el-dialog title="上传信息" :visible.sync="dialogFormVisible" width="80%" :close-on-click-modal="false" center="">
        <div class="approve-info">
          <div class="user-info">
            <span class="subtitle user-item">用户信息</span>
            <span class="user-item">用户名: {{ temp.name }}</span>
            <span class="user-item">邮箱: {{ temp.email }}</span>
            <span class="user-item">注册电话: {{ temp.phone }}</span>
            <span class="user-item">注册地区: {{ temp.address }}</span>
            <span class="user-item">所属网点: {{ temp.deptName }}</span>
            <span class="subtitle user-item">认证法人信息</span>
            <span class="user-item">法人姓名: {{ temp.legalName }}</span>
            <span class="user-item">法人身份证: {{ temp.legalIdCode }}</span>
            <span class="user-item">法人电话: {{ temp.legalTel }}</span>
          </div>
          <div class="company-info">
            <span class="subtitle company-item">企业资质信息</span>
            <span class="company-item">企业全称: {{ temp.companyName }}</span>
            <span class="company-item">所属地区: {{ temp.address }}</span>
            <span class="company-item">所属公司: {{ temp.company }}</span>
            <div class="company-item picture-list">
              <span>工商营业执照:</span>
              <el-image class="avatar" v-for="(itemurl, i) in license_list" :key="i" :src="itemurl" :preview-src-list="license_list"
                fit="cover"></el-image>
            </div>
            <span class="company-item">统一社会信用代码: {{ temp.unifiedSocialCreditCode }}</span>
            <div class="company-item picture-list">
              <span>其他证明材料:</span>
              <el-image class="avatar" v-for="(itemurl, i) in doc_list" :key="i" :src="itemurl" :preview-src-list="doc_list"
                fit="cover"></el-image>
              <!-- <el-image  style="width: 100px; height: 100px" src="@/assets/img/avatar.png"  :preview-src-list="picture_url(temp.pictures)"> </el-image> -->
            </div>
          </div>
        </div>
        <div class="approve-suggest">
          <div class="distribute-container">
            <div class="approve-item item">
              <span>审批意见: </span>
              <div>
                <el-radio v-model="temp.acceptStatus" :label="2">通过</el-radio>
                <el-radio v-model="temp.acceptStatus" :label="3">未通过</el-radio>
              </div>
            </div>
            <div class="approve-item item">
              <span>角色分配: </span>
              <el-select v-model="temp.roleIds" filterable reserve-keyword placeholder="角色分配" multiple clearable>
                <el-option v-for="item in list_role" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </div>
            <div class="approve-item item">
              <span>网点分配: </span>
              <el-select v-model="temp.deviceResourceIds" filterable reserve-keyword placeholder="网点资源分配" multiple
                clearable>
                <el-option v-for="item in list_resource2" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </div>
            <div class="approve-item item">
              <span>设备分配: </span>
              <el-select v-model="temp.pointResourceIds" filterable reserve-keyword placeholder="设备资源分配" multiple
                clearable>
                <el-option v-for="item in list_resource1" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </div>
          </div>

          <div class="approve-remark">
            <div class="approve-remark-title">备注:</div>
            <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 5 }" placeholder="请输入备注" v-model="temp.remark">
            </el-input>
          </div>
        </div>

        <div slot="footer" class="dialog-footer">
          <el-button class="plain-dialog-btn" @click="dialogFormVisible = false">取消</el-button>
          <el-button class="fill-dialog-btn" @click="commitApprove">提交</el-button>
        </div>
      </el-dialog>
    </div>

    <!-- 待整改的页面 -->
    <div v-loading="fullscreenLoading" v-else-if="ProcessView == 1">
      <div class="app-container">
        <div class="WorkOrderDetails">
          <!-- 工单信息 -->
          <div class="WorkOrderInformation">
            <div class="titleWOD">工单信息</div>
            <el-row>
              <el-col style="margin-left: 30px" :span="5">
                <div style="margin: 10px">
                  <span style="margin-right: 10px">提交时间:</span>
                  <span v-if="createTime == ''">暂无数据</span>
                  <span v-else>{{
                    createTime | parseTime("{y}-{m}-{d} {h}:{i}")
                  }}</span>
                </div>
                <div style="margin: 10px">
                  <span style="margin-right: 10px">门店:</span>
                  <span>{{ pointName || "暂无数据" }}</span>
                </div>
              </el-col>
              <el-col :span="5">
                <div style="margin: 10px">
                  <span style="margin-right: 10px">发起人:</span>
                  <span>{{ createUserName || "暂无数据" }}</span>
                </div>
                <div style="margin: 10px">
                  <span style="margin-right: 10px">事件类型:</span>
                  <span v-if="detailsStatus == 'COMMIT'">提交</span>
                  <span v-else-if="detailsStatus == 'REJECTED'">驳回</span>
                  <span v-else-if="detailsStatus == 'ACCEPT'">验收通过</span>
                  <span v-else-if="detailsStatus == 'RECTIFICATION'">整改</span>
                  <span v-else-if="detailsStatus == 'NOT_RECTIFICATION'">不整改</span>
                  <span v-else-if="detailsStatus == 'TURN'">转派</span>
                  <span v-else>暂无数据</span>
                </div>
              </el-col>
              <el-col :span="5">
                <div style="margin: 10px">
                  <span style="margin-right: 10px">指派人:</span>
                  <span>{{ dealWithUserName || "暂无数据" }}</span>
                </div>
                <div style="margin: 10px">
                  <span style="margin-right: 10px">优先级:</span>
                  <span v-if="priority == 1">高</span>
                  <span v-else-if="priority == 2">中</span>
                  <span v-else-if="priority == 3">低</span>
                  <span v-else>暂无数据</span>
                </div>
              </el-col>
              <el-col :span="5">
                <div style="margin: 10px">
                  <span style="margin-right: 10px">抄送:</span>
                  <span>{{ copyUserName || "暂无数据" }}</span>
                </div>
                <div style="margin: 10px">
                  <span style="margin-right: 10px">备注:</span>
                  <span>{{ remark || "暂无数据" }}</span>
                </div>
              </el-col>
              <el-col :span="3">
                <div style="margin: 10px">
                  <div v-if="statussvg == 1">
                    <svg1></svg1>
                  </div>
                  <div v-else-if="statussvg == 2">
                    <svg2></svg2>
                  </div>
                  <div v-else-if="statussvg == 3">
                    <svg3></svg3>
                  </div>
                  <span v-else>暂无数据</span>
                </div>
              </el-col>
            </el-row>
          </div>

          <!-- 工单视图 -->
          <div class="WorkOrderView">
            <div style="flex: 1">
              <div class="titleWOD">工单照片</div>
              <div style="display: flex">
                <!-- 整改前 -->
                <div style="margin: 30px">
                  <div style="margin-bottom: 10px">整改前：</div>
                  <el-image style="width: 200px; height: 150px" :src="beforeImg" :preview-src-list="beforeArr">
                  </el-image>
                </div>
                <!-- 整改后 -->
                <div style="margin: 30px">
                  <div style="margin-bottom: 10px">整改后：</div>
                  <el-image style="width: 200px; height: 150px" :src="afterImg" :preview-src-list="afterArr">
                  </el-image>
                </div>
              </div>
            </div>

            <div style="flex: 1">
              <div class="titleWOD">视频直播</div>
              <!-- 播放器 -->
              <div style="margin-left: 10px;display: flex;flex-direction: column;height:90%;">
                <PlayerBoxWO @toReplay="toReplay" @timeChange="timeChange" id="videoPlayer" :stream_type="videoStream" ref="videoPlayer" >
                </PlayerBoxWO>
              </div>
            </div>
          </div>

          <!-- 事件处理 -->
          <div class="WorkOrderProcessing">
            <div style="flex: 1">
              <div class="titleWOD">事件处理</div>

              <div style="
                  display: flex;
                  align-items: flex-end;
                  margin-left: 30px;
                  margin-top: 20px;
                ">
                <div style="margin-right: 10px">事件处理:</div>

                <el-radio-group v-model="ToBeRectifiedRadio">
                  <el-radio :label="1">整改</el-radio>
                  <el-radio :label="2">不整改</el-radio>
                  <el-radio :label="3">指派</el-radio>
                </el-radio-group>
              </div>

              <div>
                <!-- 图片上传 -->
                <div v-show="ToBeRectifiedRadio == 1" style="margin-left: 30px; margin-top: 20px">
                  <UploadImg ref="upimg" :imgID="ThisWorkOrderId"></UploadImg>
                </div>

                <!-- 指派 -->
                <div v-if="ToBeRectifiedRadio == 3" style="margin-left: 30px; margin-top: 20px">
                  <div class="input-box">
                    <span style="margin-right: 10px">转派人:</span>
                    <el-select v-model="orderListUserInfoID" filterable reserve-keyword placeholder="指定转派人" clearable>
                      <el-option v-for="(item, index) in list_deal" :key="index" :label="item.realName" :value="item.userId">
                      </el-option>
                    </el-select>
                  </div>
                </div>

                <!-- 备注 -->
                <div style="
                    display: flex;
                    margin-left: 30px;
                    margin-top: 20px;
                    align-items: center;
                  ">
                  <span style="margin-right: 10px">备注:</span>
                  <el-input style="width: 500px" type="textarea" :maxlength="120" placeholder="请输入备注信息" show-word-limit
                    v-model="remarks"></el-input>
                </div>
              </div>
              <el-button style="margin-left: 30px; margin-top: 20px" class="fill-dialog-btn" @click="ToBeRectifiedDetermine">确认</el-button>
              <el-button style="margin-left: 30px; margin-top: 20px" class="plain-dialog-btn" @click="goBackToBeRectified">返回</el-button>
            </div>

            <div style="flex: 1">
              <div class="titleWOD" style="margin-bottom: 15px">事件跟踪</div>
              <el-timeline>
                <el-timeline-item v-for="(activity, index) in activities" :key="index" :timestamp="
                    activity.createTime | parseTime('{y}-{m}-{d} {h}:{i}')
                  ">
                  {{ activity.reason }}
                </el-timeline-item>
              </el-timeline>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 待验收的页面 -->
    <div v-loading="fullscreenLoading" v-else-if="ProcessView == 2">
      <div class="app-container">
        <div class="WorkOrderDetails">
          <!-- 工单信息 -->
          <div class="WorkOrderInformation">
            <div class="titleWOD">工单信息</div>
            <el-row>
              <el-col style="margin-left: 30px" :span="5">
                <div style="margin: 10px">
                  <span style="margin-right: 10px">提交时间:</span>
                  <span v-if="createTime == ''">暂无数据</span>
                  <span v-else>{{
                    createTime | parseTime("{y}-{m}-{d} {h}:{i}")
                  }}</span>
                </div>
                <div style="margin: 10px">
                  <span style="margin-right: 10px">门店:</span>
                  <span>{{ pointName || "暂无数据" }}</span>
                </div>
              </el-col>
              <el-col :span="5">
                <div style="margin: 10px">
                  <span style="margin-right: 10px">发起人:</span>
                  <span>{{ createUserName || "暂无数据" }}</span>
                </div>
                <div style="margin: 10px">
                  <span style="margin-right: 10px">事件类型:</span>
                  <span v-if="detailsStatus == 'COMMIT'">提交</span>
                  <span v-else-if="detailsStatus == 'REJECTED'">驳回</span>
                  <span v-else-if="detailsStatus == 'ACCEPT'">验收通过</span>
                  <span v-else-if="detailsStatus == 'RECTIFICATION'">整改</span>
                  <span v-else-if="detailsStatus == 'NOT_RECTIFICATION'">不整改</span>
                  <span v-else-if="detailsStatus == 'TURN'">转派</span>
                  <span v-else>暂无数据</span>
                </div>
              </el-col>
              <el-col :span="5">
                <div style="margin: 10px">
                  <span style="margin-right: 10px">指派人:</span>
                  <span>{{ dealWithUserName || "暂无数据" }}</span>
                </div>
                <div style="margin: 10px">
                  <span style="margin-right: 10px">优先级:</span>
                  <span v-if="priority == 1">高</span>
                  <span v-else-if="priority == 2">中</span>
                  <span v-else-if="priority == 3">低</span>
                  <span v-else>暂无数据</span>
                </div>
              </el-col>
              <el-col :span="5">
                <div style="margin: 10px">
                  <span style="margin-right: 10px">抄送:</span>
                  <span>{{ copyUserName || "暂无数据" }}</span>
                </div>
                <div style="margin: 10px">
                  <span style="margin-right: 10px">备注:</span>
                  <span>{{ remark || "暂无数据" }}</span>
                </div>
              </el-col>
              <el-col :span="3">
                <div style="margin: 10px">
                  <div v-if="statussvg == 1">
                    <svg1></svg1>
                  </div>
                  <div v-else-if="statussvg == 2">
                    <svg2></svg2>
                  </div>
                  <div v-else-if="statussvg == 3">
                    <svg3></svg3>
                  </div>
                  <span v-else>暂无数据</span>
                </div>
              </el-col>
            </el-row>
          </div>

          <!-- 工单视图 -->
          <div class="WorkOrderView">
            <div style="flex: 1">
              <div class="titleWOD">工单照片</div>
              <div style="display: flex">
                <!-- 整改前 -->
                <div style="margin: 30px">
                  <div style="margin-bottom: 10px">整改前：</div>
                  <el-image style="width: 200px; height: 150px" :src="beforeImg" :preview-src-list="beforeArr">
                  </el-image>
                </div>
                <!-- 整改后 -->
                <div style="margin: 30px">
                  <div style="margin-bottom: 10px">整改后：</div>
                  <el-image style="width: 200px; height: 150px" :src="afterImg" :preview-src-list="afterArr">
                  </el-image>
                </div>
              </div>
            </div>

            <div style="flex: 1">
              <div class="titleWOD">视频直播</div>
              <!-- 播放器 -->
              <div style="margin-left: 10px;display: flex;flex-direction: column;height:90%;">
                <PlayerBoxWO @toReplay="toReplay" @timeChange="timeChange" id="videoPlayer" :stream_type="videoStream" ref="videoPlayer" >
                </PlayerBoxWO>
              </div>
            </div>
          </div>

          <!-- 事件处理 -->
          <div class="WorkOrderProcessing">
            <div style="flex: 1">
              <div class="titleWOD">事件处理</div>

              <div style="
                  display: flex;
                  align-items: flex-end;
                  margin-left: 30px;
                  margin-top: 20px;
                ">
                <div style="margin-right: 10px">事件处理:</div>

                <el-radio-group v-model="ToBeRectifiedRadio">
                  <el-radio :label="1">验收合格</el-radio>
                  <el-radio :label="2">驳回</el-radio>
                </el-radio-group>
              </div>

              <div v-show="ToBeRectifiedRadio == 1">
                <!-- 备注 -->
                <div style="
                    display: flex;
                    margin-left: 30px;
                    margin-top: 20px;
                    align-items: center;
                  ">
                  <span style="margin-right: 10px">备注:</span>
                  <el-input style="width: 500px" type="textarea" :maxlength="120" placeholder="请输入备注信息" show-word-limit
                    v-model="remarks"></el-input>
                </div>
              </div>

              <!-- 驳回 -->
              <div v-show="ToBeRectifiedRadio == 2">
                <!-- 备注 -->
                <div style="
                    display: flex;
                    margin-top: 20px;
                    margin-left: 30px;
                    flex-direction: column;
                  ">
                  <div>
                    <span style="margin-right: 10px">时限:</span>
                    <el-date-picker :default-value="new Date()" style="width: 500px" v-model="dealWithTime" type="datetime"
                      value-format="yyyy-MM-dd HH:mm:ss" :picker-options="pickerOptions0" @change="handle" />
                  </div>

                  <div style="margin-top: 20px;display: flex;align-items: center;">
                    <span style="margin-right: 10px;">备注:</span>
                    <el-input style="width: 500px" type="textarea" :maxlength="120" placeholder="请输入备注信息"
                      show-word-limit v-model="remarks"></el-input>
                  </div>
                </div>
              </div>

              <el-button style="margin-left: 30px; margin-top: 20px" class="fill-dialog-btn" @click="ToBeAcceptedDetermine">确认</el-button>
              <el-button style="margin-left: 30px; margin-top: 20px" class="plain-dialog-btn" @click="goBack">返回
              </el-button>
            </div>

            <div style="flex: 1">
              <div class="titleWOD" style="margin-bottom: 15px">事件跟踪</div>
              <el-timeline>
                <el-timeline-item v-for="(activity, index) in activities" :key="index" :timestamp="
                    activity.createTime | parseTime('{y}-{m}-{d} {h}:{i}')
                  ">
                  {{ activity.reason }}
                </el-timeline-item>
              </el-timeline>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 已验收的页面 -->
    <div v-loading="fullscreenLoading" v-else-if="ProcessView == 3">
      <div class="app-container">
        <div class="WorkOrderDetails">
          <!-- 工单信息 -->
          <div class="WorkOrderInformation">
            <div class="titleWOD">工单信息</div>
            <el-row>
              <el-col style="margin-left: 30px" :span="5">
                <div style="margin: 10px">
                  <span style="margin-right: 10px">提交时间:</span>
                  <span v-if="createTime == ''">暂无数据</span>
                  <span v-else>{{
                    createTime | parseTime("{y}-{m}-{d} {h}:{i}")
                  }}</span>
                </div>
                <div style="margin: 10px">
                  <span style="margin-right: 10px">门店:</span>
                  <span>{{ pointName || "暂无数据" }}</span>
                </div>
              </el-col>
              <el-col :span="5">
                <div style="margin: 10px">
                  <span style="margin-right: 10px">发起人:</span>
                  <span>{{ createUserName || "暂无数据" }}</span>
                </div>
                <div style="margin: 10px">
                  <span style="margin-right: 10px">事件类型:</span>
                  <span v-if="detailsStatus == 'COMMIT'">提交</span>
                  <span v-else-if="detailsStatus == 'REJECTED'">驳回</span>
                  <span v-else-if="detailsStatus == 'ACCEPT'">验收通过</span>
                  <span v-else-if="detailsStatus == 'RECTIFICATION'">整改</span>
                  <span v-else-if="detailsStatus == 'NOT_RECTIFICATION'">不整改</span>
                  <span v-else-if="detailsStatus == 'TURN'">转派</span>
                  <span v-else>暂无数据</span>
                </div>
              </el-col>
              <el-col :span="5">
                <div style="margin: 10px">
                  <span style="margin-right: 10px">指派人:</span>
                  <span>{{ dealWithUserName || "暂无数据" }}</span>
                </div>
                <div style="margin: 10px">
                  <span style="margin-right: 10px">优先级:</span>
                  <span v-if="priority == 1">高</span>
                  <span v-else-if="priority == 2">中</span>
                  <span v-else-if="priority == 3">低</span>
                  <span v-else>暂无数据</span>
                </div>
              </el-col>
              <el-col :span="5">
                <div style="margin: 10px">
                  <span style="margin-right: 10px">抄送:</span>
                  <span>{{ copyUserName || "暂无数据" }}</span>
                </div>
                <div style="margin: 10px">
                  <span style="margin-right: 10px">备注:</span>
                  <span>{{ remark || "暂无数据" }}</span>
                </div>
              </el-col>
              <el-col :span="3">
                <div style="margin: 10px">
                  <div v-if="statussvg == 1">
                    <svg1></svg1>
                  </div>
                  <div v-else-if="statussvg == 2">
                    <svg2></svg2>
                  </div>
                  <div v-else-if="statussvg == 3">
                    <svg3></svg3>
                  </div>
                  <span v-else>暂无数据</span>
                </div>
              </el-col>
            </el-row>
          </div>

          <!-- 工单视图 -->
          <div class="WorkOrderView">

            <div style="flex: 1">
              <div class="titleWOD">工单照片</div>
              <div style="display: flex">
                <!-- 整改前 -->
                <div style="margin: 30px">
                  <div style="margin-bottom: 10px">整改前：</div>
                  <el-image style="width: 200px; height: 150px" :src="beforeImg" :preview-src-list="beforeArr">
                  </el-image>
                </div>
                <!-- 整改后 -->
                <div style="margin: 30px">
                  <div style="margin-bottom: 10px">整改后：</div>
                  <el-image style="width: 200px; height: 150px" :src="afterImg" :preview-src-list="afterArr">
                  </el-image>
                </div>
              </div>
              <el-button style="margin-left: 30px; margin-top: 20px" class="plain-dialog-btn" @click="goBack">返回
              </el-button>
            </div>

            <div style="flex: 1">
              <div style="flex: 1">
                <div class="titleWOD" style="margin-bottom: 15px">事件跟踪</div>
                <el-timeline>
                  <el-timeline-item v-for="(activity, index) in activities" :key="index" :timestamp="
                    activity.createTime | parseTime('{y}-{m}-{d} {h}:{i}')
                  ">
                    {{ activity.reason }}
                  </el-timeline-item>
                </el-timeline>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>

    <!-- 预留一个页面 -->
    <div v-loading="fullscreenLoading" v-else>
      <h1>预留一个页面</h1>
      <button @click="goBack">返回</button>
    </div>
  </div>
</template>

<script>
  // 主页面
  import {
    workOrderStatus,
    workOrderlist,
    groupInfoList,
    orderDetails,
  } from "@/api/workorder";
  import waves from "@/directive/waves"; // waves directive
  import {
    parseTime
  } from "@/utils"; // 解析时间
  import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
  import {
    orderCreatedUser,
    orderListUser,
    checkUserinfo,
    checkApproveNew,
  } from "@/api/permission";
  import {
    branchList
  } from "@/api/branch";
  import {
    validPass
  } from "@/utils/validate";
  import {
    logger
  } from "runjs/lib/common";
  import UploadImg from "@/components/UploadImg/UploadImg";

  import svg1 from "@/components/SvgBackground/svg1.vue";
  import svg2 from "@/components/SvgBackground/svg2.vue";
  import svg3 from "@/components/SvgBackground/svg3.vue";
  import {
    uploadWkImg
  } from "@/api/workorder";

  import {
    delImgCorporation
  } from "@/api/login";

  // 播放器
  import PlayerBoxWO from '@/components/DeviceVideoPlayer/PlayerBoxWO'

  // 前后一分钟
  import { getPlaybackStream } from "@/api/video.js";

  // 去处理页面

  const calendarTypeOptions = [{
      key: "CN",
      display_name: "China"
    },
    {
      key: "US",
      display_name: "USA"
    },
    {
      key: "JP",
      display_name: "Japan"
    },
    {
      key: "EU",
      display_name: "Eurozone"
    },
  ];

  // arr to obj, such as { CN : "China", US : "USA" }
  const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
    acc[cur.key] = cur.display_name;
    return acc;
  }, {});

  export default {
    name: "WorkorderSelf",
    components: {
      Pagination,
      UploadImg,
      svg1,
      svg2,
      svg3,
      PlayerBoxWO
    },
    directives: {
      waves
    },
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: "success",
          draft: "info",
          deleted: "danger",
        };
        return statusMap[status];
      },
      typeFilter(type) {
        return calendarTypeKeyValue[type];
      },
    },
    data() {
      const validatePassword = (rule, value, callback) => {
        // if (!validPass(value) && (value && value.length != 64)) {
        if (!validPass(value)) {
          callback(new Error("8~16位,包含大小写字母和数字, 可以有特殊字符"));
        } else {
          callback();
        }
      };

      return {
        // videojs播放hls格式的配置项------------------------------------------
        videoOptions: {
          controls: true, // 是否显示底部控制栏
          crossOrigin:"anonymous",// anonymous，，，use-credentials
          preload: "auto", // 加载<video>标签后是否加载视频
          autoplay: true, // 自动播放
          playbackRates: [0.5, 1, 1.5, 2],// 倍速播放
          flash: {//支持rtpm播放
            hls: { withCredentials: false },
            swf: '../static/video-js.swf'//rtmp falsh播放时需要  ？？？
          },
          // languages: { "zh-cn": video_zhCN },   //播放器中文语言
          muted: true, // 默认情况下将会消除任何音频
          loop: false, // 导致视频一结束就重新开始。
          // language: "zh-CN",
          // aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
          // width: document.documentElement.clientWidth,   // 播放器 宽度
          // width: "394",
          // height: "238",
          fluid: false, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
          hls: true,
          poster: "poster.jpg", //你的封面图片地址
          notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
          sources: [{
            //hls协议type为application/x-mpegURL     //rtmp协议的type为rtmp/flv
            type: "application/x-mpegURL",
            src:"test.m3u8"   // "http://cctvalih5ca.v.myalicdn.com/live/cctv1_2/index.m3u8"
          }],
          controlBar: {
            timeDivider: true,
            durationDisplay: true,
            remainingTimeDisplay: false,
            fullscreenToggle: true, //全屏按钮
            // 自定义按钮的位置
            children: [
              {
                name: "playToggle"
              },
              {
                name: "progressControl"
              },
              {
                name: "currentTimeDisplay"
              },
              {
                name: "timeDivider"//时间进度条
              },
              {
                name: "durationDisplay"
              },
              {
                name: "volumePanel", // 音量调整方式横线条变为竖线条
                inline: false
              },
              {
                name: "pictureInPictureToggle" //画中画播放模式
              },
              {
                name: "fullscreenToggle"
              }
            ]
          },
        },
        pickerOptions0: {
          disabledDate: (time) => {
            return time.getTime() < Date.now() - 1 * 24 * 3600 * 1000
          }
        },
        // 时限
        dealWithTime: '',
        // 驳回删除图片用的
        rejectimg: [],
        // 整改前图片
        beforeImg: "",
        beforeArr: [],
        // 整改后图片
        afterImg: "",
        afterArr: [],
        tableKey: 0,
        list: [],
        total: 0, // 总条数
        listLoading: true,
        select_datetime: null, // 可以使用, 也可使用change(e) 的参数e
        listQuery: {
          page: 1, // 第几页
          limit: 10, // 每页显示的条数row
          keyword: "", // 搜索关键字
          searchBy: "", // 搜索条件(全部, 我发起的, 待我整改的, 待我验收的, 抄送我)
          createTimeFrom: "",
          createTimeTo: "",
          groupId: "", // 公司的id
          createUserName: "", // 发起人
          dealWithUserName: "", // 处理人
          acceptUserName: "", // 审核人
          copyUserName: "", // 抄送至
          pointId: "", // 网点id
          status: "", // 处理状态
          overdueStatus: "", // 逾期状态
          priority: "", // 优先级
        },
        list_group: [{
            id: "",
            label: "全部"
          },
          {
            id: 11,
            label: "邮政"
          },
          {
            id: 12,
            label: "圆通"
          },
          {
            id: 13,
            label: "申通"
          },
          {
            id: 14,
            label: "中通"
          },
          {
            id: 15,
            label: "韵达"
          },
          {
            id: 16,
            label: "顺丰"
          },
        ], // 所属公司
        list_branch: [], // 所属网点
        list_initiator: [], // 发起人
        // list_copy: [],   // 抄送至
        // list_accept: [],   // 审核人
        list_deal: [], // 处理人
        list_status: [{
            id: "",
            label: "全部"
          },
          {
            id: 1,
            label: "带整改"
          },
          {
            id: 2,
            label: "待验收"
          },
          {
            id: 3,
            label: "已验收"
          },
        ], // 处理状态
        list_overdue: [{
            id: "",
            label: "全部"
          },
          {
            id: 1,
            label: "未逾期"
          },
          {
            id: 2,
            label: "已逾期"
          },
        ], // 逾期状态
        list_priority: [{
            id: "",
            label: "全部"
          },
          {
            id: 1,
            label: "高"
          },
          {
            id: 2,
            label: "中"
          },
          {
            id: 3,
            label: "低"
          },
        ], // 优先级
        list_search: [{
            id: "",
            label: "全部"
          },
          {
            id: "commit",
            label: "我发起的"
          },
          {
            id: "deal",
            label: "待我整改"
          },
          {
            id: "accept",
            label: "待我验收"
          },
          {
            id: "copy",
            label: "抄送至"
          },
        ], // 搜索条件

        calendarTypeOptions,
        temp: {
          id: "",
          acceptStatus: "",
          remark: "",
          roleIds: [],
          resourceIds: [],
        },

        dialogFormVisible: false,
        dialogStatus: "",
        // 提交审批意见
        // temp_id: '',
        // temp_remark: '',
        license_list: [],
        doc_list: [],

        list_role: [], // 角色列表
        list_resource: [], // 资源组列表
        list_resource2: [], // 网点资源组列表
        list_resource1: [], // 设备资源组列表
        ProcessView: 0,
        activities: [],
        createTime: "",
        pointName: "",
        createUserName: "",
        dealWithUserName: "",
        priority: "",
        copyUserName: "",
        remark: "",
        ToBeRectifiedRadio: 1,
        // 处理人列表
        orderListUserInfoID: "", // 被指派人的id
        remarks: "",
        ThisWorkOrderId: "",
        role_list: [], // 按钮权限
        // 工单详情里的事件类型
        detailsStatus: "",
        // 加载条
        fullscreenLoading: false,
        // 驳回删除
        afterImgid: '',
        // 用于判断svg图展示
        statussvg: '',
        // 直播地址
        videoSrc: '',
        // 选择视频流格式
        videoStream: 'HLS'
      }
    },
    watch: {},
    created() {
      this.getList();
    },
    mounted() {
      this.getBranchList();
      this.getCommit();
      this.getDeal()
      this.role_list = this.$store.getters.menu_code_list
      // this.getOrderListUser();
      // this.getAccept()
      // this.getCopy()
    },
    computed: {
      switch_status() {
        return (sta) => {
          if (sta == 1) return "待审批";
          else if (sta == 2) return "已审批";
          else if (sta == 3) return "未通过";
        };
      },
      picture_url() {
        return (arr) => {
          if (arr && arr.length > 0) {
            let newarr = arr.map((item, index) => {
              return "/api" + item.pictureUrl;
            });
            return newarr;
          }
        };
      },
    },
    methods: {
      // 重播
      toReplay(newSrc, oldSrc) {
        if(oldSrc != '') {
          // 不是第一次
          this.$refs['videoPlayer'].videoSrc = oldSrc
        } else {
          // 第一次播放
          this.$refs['videoPlayer'].videoSrc = newSrc
        }
      },
      // 传递变化时间
      timeChange(time) {
        // console.log('时间 :>> ', time)
        if (time > 60) {
          this.$refs['videoPlayer'].videoSrc = ''
          this.$refs['videoPlayer'].unplayableText = '播放结束'
        }
      },
      // 时间精确到当前以前
      handle() {
        console.log('触发精确分秒 :>> ', this.dealWithTime)
        var startAt = new Date(this.dealWithTime) * 1000 / 1000
        if (startAt < Date.now() && this.dealWithTime != null) {
          this.$notify({
            title: "警告",
            message: '选择此刻后的时间会导致工单预期',
            type: 'warning',
            duration: 4000
          })
        }
        console.log('触发精确分秒 :>> ', this.dealWithTime)
      },
      // 清空详情页面内容
      EmptyDetails() {
        // 类型
        this.ToBeRectifiedRadio = 1
        // 指派人ID
        this.orderListUserInfoID = ""
        // 备注
        this.remarks = ""
      },

      // 详情页返回
      goBack() {
        this.ProcessView = 0;
        this.EmptyDetails()
        this.beforeImg = ""
        this.afterImg = ""
      },
      // 有图片上传的返回
      goBackToBeRectified() {
        this.$refs["upimg"].DeleteRemainingPictures()
        this.ProcessView = 0
        this.EmptyDetails()
        this.beforeImg = ""
        this.afterImg = ""
      },

      // 待整改页面确定按钮
      ToBeRectifiedDetermine() {
        // console.log("该工单的id :>> ", this.ThisWorkOrderId);
        // console.log("类型", this.ToBeRectifiedRadio);
        // console.log("指派人ID", this.orderListUserInfoID);
        // console.log("备注 :>> ", this.remarks);

        if (this.ToBeRectifiedRadio == 1) {
          // 整改
          if (this.$refs["upimg"].uploadBase64().length == 0) {
            this.$notify({
              message: "未上传整改图片",
              type: 'warning'
            })
          } else {
            workOrderStatus({
              id: this.ThisWorkOrderId,
              status: 'RECTIFICATION',
              reason: this.remarks,
              base64Pictures: [this.$refs["upimg"].uploadBase64()[0].base64Pictures[0]],
              pictureType: 'rectify-after'
            }).then(res => {
              if (res.code == -4) {
                this.$notify({
                  message: res.msg,
                  type: 'warning'
                })
              } else {
                console.log('返回的数据 :>> ', res);
                this.goBack()
                this.getList()
                this.$refs["upimg"].DeleteRemainingPictures()
              }
            })
          }
        } else if (this.ToBeRectifiedRadio == 2) {
          // 不整改
          workOrderStatus({
            id: this.ThisWorkOrderId,
            status: 'NOT_RECTIFICATION',
            reason: this.remarks
          }).then(res => {

            if (res.code == -4) {
              this.$notify({
                message: res.msg,
                type: 'warning'
              })
            } else {
              console.log('返回的数据 :>> ', res);
              this.goBackToBeRectified()
              this.getList()
            }
          })
        } else if (this.ToBeRectifiedRadio == 3) {
          // 转派
          workOrderStatus({
            id: this.ThisWorkOrderId,
            status: 'TURN',
            reason: this.remarks,
            acceptUserId: this.orderListUserInfoID
          }).then(res => {

            if (res.code == -4) {
              this.$notify({
                message: res.msg,
                type: 'warning'
              })
            } else {
              console.log('返回的数据 :>> ', res);
              this.goBackToBeRectified()
              this.getList()
            }
          })
        } else {
          console.log('预留的一个状态 :>> ');
        }

      },

      // 待验收页面的确定按钮
      ToBeAcceptedDetermine() {
        if (this.ToBeRectifiedRadio == 1) {
          // 验收合格
          workOrderStatus({
            id: this.ThisWorkOrderId,
            status: 'ACCEPT',
            reason: this.remarks
          }).then(res => {
            if (res.code == -4) {
              this.$notify({
                message: res.msg,
                type: 'warning'
              })
            } else {

              console.log('返回的数据 :>> ', res);
              this.goBack()
              this.getList()
            }
          })
        } else if (this.ToBeRectifiedRadio == 2) {
          // 驳回
          console.log('this.dealWithTime :>> ', this.dealWithTime)
          if (this.dealWithTime == '' || this.dealWithTime == null) {
            this.$notify({
              message: "请指定新的整改时间",
              type: 'warning'
            })
          } else {
            workOrderStatus({
              id: this.ThisWorkOrderId,
              status: 'REJECTED',
              reason: this.remarks,
              pictureUrl: this.afterImgid,
              dealWithTime: this.dealWithTime
            }).then(res => {

              if (res.code == -4) {
                this.$notify({
                  message: res.msg,
                  type: 'warning'
                })
              } else {
                console.log('返回的数据 :>> ', res);
                this.goBack()
                this.getList()
              }
            })
          }
        } else {
          console.log('预留的一个状态 :>> ');
        }
      },

      // 详情页按钮
      seeWorkorderInfo(row) {
        console.log('row :>> ', row)
        if (row.View_button == false) {
          this.ProcessView = row.status;
        } else {
          this.ProcessView = 3
        }

        this.ThisWorkOrderId = row.id;

        this.fullscreenLoading = true;

        orderDetails({
            id: row.id,
          })
          .then((res) => {
            console.log("拿到的数据 :>> ", res);

            this.createTime = res.data.createTime;
            this.pointName = res.data.pointName;
            this.createUserName = res.data.createUserName;
            this.dealWithUserName = res.data.dealWithUserName;
            this.priority = res.data.priority;
            this.copyUserName = res.data.copyUserName;
            this.remark = res.data.remark;
            this.activities = res.data.workOrderFlows;
            this.detailsStatus = res.data.statusReason
            this.statussvg = res.data.status
            // 播放器
            // var videoPlayer = document.getElementById("videoPlayer")
            // if (videoPlayer != null) {
            //   this.$refs['videoPlayer'].videoSrc = res.data.recordStreamVos[0].hlsAddr
            // }
            this.$refs['videoPlayer'].unplayableText = '正在加载'
            getPlaybackStream({
              deviceId: res.data.recordStreamVos[0].deviceId,
              channelId: res.data.recordStreamVos[0].channelId,
              recordId: res.data.recordStreamVos[0].recordId
            }).then(res => {
              this.$refs['videoPlayer'].videoSrc = res.data.hlsAddr
            }).catch(res => {
              this.$message({
                message: "网络错误",
                type: "error",
              })
              this.$refs['videoPlayer'].videoSrc = ''
              this.$refs['videoPlayer'].unplayableText = '加载失败'
            })
            // 小图赋值
            for (let index = 0; index < res.data.pictures.length; index++) {
              if (res.data.pictures[index].type == "rectify-before") {
                this.beforeImg = "http://" + res.data.pictures[index].pictureUrl
                break
              } else if (res.data.pictures[index].type == "rectify-after") {
                // console.log('第一张不是整改前 :>> ')
              } else {
                break
              }
            }

            for (let index = 0; index < res.data.pictures.length; index++) {
              if (res.data.pictures[index].type == "rectify-after") {
                this.afterImg = "http://" + res.data.pictures[index].pictureUrl
                this.afterImgid = res.data.pictures[index].pictureUrl
                break
              } else if (res.data.pictures[index].type == "rectify-before") {
                // console.log('第一张不是整改后 :>> ')
              } else {
                break
              }
            }

            // 大图数组赋值
            res.data.pictures.forEach(element => {
              if (element.type == "rectify-before") {
                this.beforeArr.push(
                  "http://" + element.pictureUrl
                )
              } else if (element.type == "rectify-after") {
                this.afterArr.push(
                  "http://" + element.pictureUrl
                )
                // 这个用于待验收驳回删除图片
                this.rejectimg.push(element.id)
              }
            })

            // 关闭进度条
            this.fullscreenLoading = false
          })
          .catch((res) => {
            console.log("网络错误 :>> ");
          });
      },
      // 获取 table 列表
      getList() {
        this.listLoading = true;
        workOrderlist({
          pageNo: this.listQuery.page,
          pageSize: this.listQuery.limit,
          searchBy: this.listQuery.searchBy,
          createTimeFrom: this.listQuery.createTimeFrom,
          createTimeTo: this.listQuery.createTimeTo,
          groupId: this.listQuery.groupId,
          pointId: this.listQuery.pointId,
          createUserName: this.listQuery.createUserName,
          dealWithUserName: this.listQuery.dealWithUserName,
          overdueStatus: this.listQuery.overdueStatus,
          status: this.listQuery.status,
          priority: this.listQuery.priority,
          orderBy: 1
        }).then((res) => {
          if (res.code == 0) {
            this.list = res.list
            res.list.forEach(element => {
              this.$set(element, 'View_button', false)
            })

            // this.list.forEach(element1 => {
            //   element1.pictures.forEach(element2 => {
            //     this.$set(element1, 'workOrderListImgArr', "http://" +  element2.pictureUrl)
            //   })
            // })

            // console.log('总数据 :>> ', this.list);

            // this.workOrderListImgArr
            // this.workOrderDetailsListImgArr

            this.total = parseInt(res.total);

            this.listLoading = false;
          } else {
            this.$message({
              message: res.msg,
              type: "error",
            })
          }
        })
      },
      // 点击了状态切换
      changeBtn(stu) {
        console.log('传值 :>> ', stu);
        this.listQuery.searchBy = stu;
        if (stu == 'deal') {
          this.listQuery.status = 1
        } else if (stu == 'accept') {
          this.listQuery.status = 2
        } else {
          this.listQuery.status = ''
        }
        this.getList()
      },

      // 更改过滤条件: 日期时间
      changeDateTime(e) {
        this.listQuery.createTimeFrom = e[0];
        this.listQuery.createTimeTo = e[1];
        this.getList();
      },
      // 筛选条件 (公司切换)
      changeGroup() {
        this.getList();
        // this.getBranchList()   // 注释后: 取消相互影响
      },
      // 获取当前区域的网点列表( 下拉回显)
      getBranchList() {
        branchList({
          pageNo: 1,
          pageSize: 1000,
          groupId: this.listQuery.groupId,
        }).then((res) => {
          if (res.code == 0) {
            this.list_branch = res.data || [];
          }
        });
      },
      // 获取发起人列表( 下拉回显 )
      getCommit() {
        orderCreatedUser().then((res) => {
          this.list_initiator = res.data || [];
        });
      },
      // 获取处理人列表 ( 下拉回显 )
      getDeal() {
        orderListUser().then((res) => {
          this.list_deal = res.data || [];
        });
      },
      // 获取审批人 列表 ( 下拉回显 )
      getAccept() {},
      // 获取抄送至 列表 ( 下拉回显 )
      getCopy() {},
      // 重置按钮
      resetfilter() {
        this.listQuery = {
          page: 1, // 第几页
          limit: 10, // 每页显示的条数row
          keyword: "", // 搜索关键字
          searchBy: "", // 搜索条件(全部, 我发起的, 待我整改的, 待我验收的, 抄送我)
          createTimeFrom: "",
          createTimeTo: "",
          groupId: "", // 公司的id
          createUserName: "", // 发起人
          dealWithUserName: "", // 处理人
          acceptUserName: "", // 审核人
          copyUserName: "", // 抄送至
          pointId: "", // 网点id
          status: "", // 处理状态
          overdueStatus: "", // 逾期状态
          priority: "", // 优先级
        };
        this.select_datetime = null;
        this.getList();
      },

      // 点击了去处理
      handleApprove(id) {
        this.temp.id = id;
        checkUserinfo({
            id: id
          })
          .then((res) => {
            // d608a8c298cf4805a12fcf985841d791
            // checkUserinfo({id: 'd608a8c298cf4805a12fcf985841d791'}).then(res => {   // d608a8c298cf4805a12fcf985841d791
            if (res.code == 0) {
              this.temp = res.data;
              if (res.data.pictures && res.data.pictures.length > 0) {
                res.data.pictures.forEach((item, i) => {
                  if (item.type == "businessLicense")
                    this.license_list.push("/api/kd-server" + item.pictureUrl);
                  if (item.type == "credential")
                    this.doc_list.push("/api/kd-server" + item.pictureUrl);
                });
              }
            } else {
              this.$message({
                message: "获取信息失败",
                type: "error",
              });
            }
          })
          .catch((res) => {
            this.$message({
              message: "网络错误",
              type: "error",
            });
          });

        this.dialogFormVisible = true;
      },
      // 提交了处理
      commitApprove() {
        if (this.temp.acceptStatus != 2 && this.temp.acceptStatus != 3) {
          this.$message({
            message: "请选择审批意见",
            type: "error",
          });
        } else {
          checkApproveNew(this.temp)
            .then((res) => {
              if (res.code == 0) {
                this.$message({
                  message: "提交成功",
                  type: "success",
                });
                this.dialogFormVisible = false;
              } else {
                this.$message({
                  message: "提交失败",
                  type: "error",
                });
              }
            })
            .catch((res) => {
              this.$message({
                message: "网络错误",
                type: "error",
              });
            });
        }
      },
    },
  };
</script>

<style lang="scss">
  @import "~@/styles/variables.scss";

  // 工单详情页面样式
  .WorkOrderDetails {
    display: flex;
    flex-direction: column;
  }

  .WorkOrderInformation {
    margin: 10px;
  }

  .WorkOrderView {
    margin: 10px;
    display: flex;
  }

  .WorkOrderProcessing {
    margin: 10px;
    display: flex;
  }

  .titleWOD {
    font-size: 16px;
    font-weight: 500;
    margin: 10px;
  }



  .crud-input {

    // border: 0;
    &.el-input--medium {
      font-size: 12px;
    }

    &.el-input--medium .el-input__inner {
      height: 27px !important;
      background: transparent;
      border: 0;
      -webkit-appearance: none;
      border-radius: 3px;
      // padding: 12px 5px 12px 15px;
      color: $text_dark;
      caret-color: $text_dark;

      &:-webkit-autofill {
        box-shadow: 0 0 0 1000px $my_opacity inset !important;
        -webkit-text-fill-color: $text_dark !important;
      }
    }

    // .el-input-group__append {
    //   color: var(--app_primary);
    //   border: 0;
    //   border-left: 1px solid var(--app_primary);

    //   .el-button {
    //     height: 27px;
    //     border: 1px solid $my_primary !important;
    //     background-color: #f11;
    //   }
    // }
  }

  // 单选框 radio
  // .el-radio.is-checked .el-radio__label {
  //   color: var(--app_primary);
  // }
  // .el-radio.is-checked .el-radio__input.is-checked .el-radio__inner {
  //   border-color: var(--app_primary);
  //   background-color: var(--app_primary);
  // }
  // .el-radio:not(.is-checked) .el-radio__input:not(.is-checked) .el-radio__inner:hover {
  //   border-color: var(--app_primary);
  // }

  // 多行文本编辑框
  // .el-textarea .el-textarea__inner:focus {
  //   border-color: var(--app_primary);
  // }

  .el-dialog {
    .el-dialog__header {
      background-color: #f5f7f5 !important;
      // .el-dialog__headerbtn .el-dialog__close:hover {
      //   color: var(--app_primary);
      // }
    }
  }

  .el-form-item__label {
    // 两端对齐
    display: flex;
    justify-content: space-between;
    align-items: center !important;

    &::before {
      transform: translateY(3px);
    }

    .form-item-label {
      flex: 1;
      text-align-last: justify !important;
      text-align: justify !important;
    }
  }
</style>


<style lang="scss" scoped>
  @import "~@/styles/variables.scss";

  .app-container {
    padding: 10px;
    background-color: #ffffff;

    .filter-container {

      // background-color: #eef;
      .input-box {
        margin-bottom: 15px !important;
      }
    }

    .crud {
      // background-color: aqua;
      margin-bottom: 32px;
      display: flex;
      justify-content: space-between;
      // background-color: antiquewhite;

      .crud-btn-container {
        font-size: 13px;
        display: flex;
        justify-content: space-between;
        // align-items: center;
        border: 1px solid var(--app_primary);
        border-radius: 3px;

        .crud-item {
          color: var(--app_primary);
          cursor: pointer;
          padding: 0 10px;
          line-height: 27px;
          border-right: 1px solid var(--app_primary);
        }

        .crud-copy {
          border: none;
        }

        .crud-active {
          height: 27px;
          background-color: var(--app_primary);
          color: $my_white;

          &.crud-all {
            transform: translateX(-1px);
          }
        }
      }
    }

    // background-color: #f99 !important;
    .el-table {
      .action {
        font-size: 13px;
        color: var(--app_primary);
        cursor: pointer;

        &:hover {
          text-decoration: underline;
        }
      }
    }

    .el-dialog {
      .approve-info {
        display: flex;
        justify-content: space-between;

        .user-info,
        .company-info {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          padding: 0 30px;
        }

        .user-info {
          border-right: 1px solid $border_middle;
        }

        .user-item,
        .company-item {
          margin-bottom: 15px;
        }

        .subtitle {
          font-weight: 700;
          font-size: 15px;
        }

        .company-info {
          & .picture-list {
            // width: 100%;
            display: flex;
            align-items: center;
            // background-color: #fdd;
            overflow: hidden;
            flex-wrap: wrap;

            &>span {
              margin-right: 10px;
            }

            .avatar {
              width: 100px;
              height: 100px;
              margin-right: 10px;
            }
          }
        }
      }

      .approve-suggest {
        margin-top: 15px;

        // background-color: #dff;
        .distribute-container {
          // background-color: #ff4;
          margin-bottom: 15px;

          .approve-item {
            // background-color: salmon;
            margin-bottom: 10px;
            display: flex;
            align-items: center;

            .el-select {
              flex: 1;
            }

            span {
              font-size: 14px;
              font-weight: 600;
              margin-right: 10px;
            }
          }
        }

        .approve-remark {
          display: flex;
          justify-content: space-between;

          .approve-remark-title {
            font-size: 14px;
            min-width: 42px;
          }
        }
      }

      .del-data {
        text-align: center;
        margin-bottom: 16px;

        img {
          width: 130px;
          height: 110px;
        }
      }

      .del-img {}
    }
  }
</style>
